<template>
    <el-select  v-model="model" :clearable="false" placeholder="请选择" style="width:100%;" @change="change">
        <el-option v-for="item in list" :key="item.classId" :label="item.classNickName" :value="item.classId">
        </el-option>
    </el-select>
</template>

<script>
import { getClassList, getClassInfoList } from 'api/studentMange';
import { mapGetters } from 'vuex';
export default {
    props: {
        value: {
            type: [String, Number],
            required: true
        },
        grade: {
            type: [String, Number]
        },
        isDefaultFill:{
            default:false
        }
    },
    computed: {
        model: {
            get() {
                if (this.list) {
                    if (this.list.some(item => item.classId == this.value)) {
                        let classObj = this.list.find((item) => {
                            return item.classId === this.value;
                        });
                        this.$emit('getClassName',classObj.classNickName); 
                        return this.value;
                    } else {
                        this.$emit('input', '');
                        return '';
                    }
                    // this.$emit('getClassList',this.list)
                } else {
                    return '';
                }
            },
            set(val) {
                this.$emit('input', val);
            }
        },
        ...mapGetters([
            'schoolId',
            'schoolType',
            'roleType'
        ])
    },
    data() {
        return {
            list: null
        }
    },
    watch: {
        grade(val) {
            this.getList();
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.list = null;
            if(this.schoolType=='0'){//普通学校
                if (this.grade) {
                    if(this.roleType == '5'){ // 角色为班主任时
                        this._getClassInfoList();
                    }else{
                        this._getClassList();
                    } 
                } else {
                    this.$emit('input', '');
                }

            }else if(this.schoolType=='1'){//培训结构 只有班级 没有年级
                this._getClassList();
            }
           
        },
        _getClassList(){
            getClassList(this.grade, this.schoolId).then(res => {
                if (res.data.content.length) {
                    this.list = res.data.content;
                    if(this.isDefaultFill){//是否要默认回填
                        this.$emit('defaultFillClass',this.list[0].classId)//默认填充年级
                    }
                    this.$emit('getClassList',this.list)
                    this.list.unshift({
                        classId: '',
                        classNickName: '请选择'
                    });
                }
            });
        },
        _getClassInfoList(){
            getClassInfoList(this.grade, this.schoolId).then(res => {
                if (res.data.content.length) {
                    let classList = res.data.content;
                    if(this.isDefaultFill){//是否要默认回填
                        this.$emit('defaultFillClass',classList[0].classId)//默认填充年级
                    }
                    this.$emit('getClassList',classList)
                    this.list=[];
                    classList.map((item,index) => {
                        this.list[index] = {};
                        this.list[index]['classId'] = item.classId;
                        this.list[index]['classNickName'] = item.className;
                    });
                    this.list.unshift({
                        classId: '',
                        classNickName: '请选择'
                    });
                }
            })
        },
        change(val) {
            this.$emit('change', val);
        }
    }
}
</script>

<style>

</style>
